<template>
	<div class="port">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
      <div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/授权管理/
				<span>接口管理</span>
			</div>
		</div>
		<div class="right_content">
			<el-table
			:data="tableData"
			border :default-sort = "{prop: 'id', order: 'descending'}"
			style="width: 100%">
				<el-table-column align="center"
			      type="selection"
			      width="55">
			    </el-table-column>
				<el-table-column align="center"
				  label="ID" sortable  prop="id"
				  width="100">
					<template scope="scope">
						<i class="icon iconfont">&#xe7dd;</i>
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="接口名称"
				  width="180">
					<template scope="scope">
						<el-tag>{{ scope.row.portName }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="接口">
					<template scope="scope">
						<el-tag>{{ scope.row.port }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="参数" align="center">
					<template scope="scope">
						<el-tag style="margin-left:5px;" v-for="(val,key) in scope.row.params">{{ val }}</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./port.styl"></style>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          portName: '修改工程',
          port: 'project/modify.do',
          params: [
          	"工程id:id",
          	"工程路径:projectUrl",
          	"工程名称:projectName",
          	"工程描述:description",
          	"排序id:sortId"
          ]
        }, {
          id: 2,
          portName: '增加工程',
          port: 'project/add.do',
          params: [
          	"工程路径:projectUrl",
          	"工程名称:projectName",
          	"工程描述:description",
          	"排序id:sortId"
          ]
        }, {
          id: 3,
          portName: '删除工程',
          port: 'project/delete.do',
          params: [
          	"工程id:id"
          ]
        }, {
          id: 4,
          portName: '所有工程',
          port: 'project/list.do',
          params: []
        },{
          id: 5,
          portName: '增加模块',
          port: 'model/add.do',
          params: [
          	"模块id:id",
          	"模块名称:name",
          	"模块描述:description"
          ]
        },{
          id: 6,
          portName: '修改模块',
          port: 'model/modify.do',
          params: [
          	"模块id:id",
          	"模块名称:name",
          	"模块描述:description"
          ]
        },{
          id: 7,
          portName: '删除模块',
          port: 'model/add.do',
          params: [
          	"模块id:id"
          ]
        },{
          id: 8,
          portName: '所有模块',
          port: 'model/list.do',
          params: [
          ]
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>